<template>
  <div>
    <el-card>
      <!-- 新增/搜索操作 -->
      <el-row style="width: 100%">
        <el-col :span="24">
          <el-button
            type="primary"
            size="mini"
            @click="showAddForm"
            class="mr10"
          >
            新增
          </el-button>
          <el-input
            size="mini"
            v-model="keyword"
            placeholder="请输入集群模版名称"
            suffix-icon="el-icon-search"
            :style="{ width: '200px' }"
            @keyup.enter.native="handleQuery"
          >
          </el-input>
        </el-col>
      </el-row>

      <!-- 列表 -->
      <el-row style="margin-top: 20px">
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
          :cell-style="cellStyle"
          height="calc(100vh - 240px)"
          @row-click="goInfo"
        >
          <el-table-column type="selection" width="50" align="left" />
          <!-- <el-table-column
            prop="colonyTemplateId"
            label="ID"
            sortable
            class="topology_id"
          >
            <template slot-scope="scope">
              <div @click="goInfo(scope.row.colonyTemplateId)">
                {{ scope.row.colonyTemplateId }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="colonyTemplateName" label="模板名称" sortable>
          </el-table-column>
          <el-table-column prop="count" label="应用数量" sortable>
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" sortable>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                style="margin-right: 10px"
                type="primary"
                @click.stop="ShowEditForm(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click.native.stop="deleteData(scope.row.colonyTemplateId)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="query.pageNum"
          :limit.sync="query.pageSize"
          :select-data-len="multipleSelection.length"
          @pagination="getListData()"
        />
      </el-row>

      <!-- 新增弹窗 -->
      <el-dialog :visible.sync="addFormVisible" title="新增">
        <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="模板名称" prop="colonyTemplateName">
            <el-input
              v-model="form.colonyTemplateName"
              placeholder="请输入模版名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="addClusterTemplate('addForm')"
            >确定</el-button
          >
          <el-button @click="addFormVisible = false" size="mini"
            >取 消</el-button
          >
        </div>
      </el-dialog>

      <!-- 编辑弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogVisible">
        <el-form ref="editForm" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="模板名称" prop="colonyTemplateName">
            <el-input
              v-model="form.colonyTemplateName"
              placeholder="请输入集群模版名称"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="editClusterTemplate('editForm')"
            >确定</el-button
          >
          <el-button @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  getClusterList_Api, //集群模版列表
  addCluster_Api, //集群模板添加
  editCluster_Api, //集群模板编辑
  delCluster_Api, //集群列表删除
} from "@/api/configuration/business";
import {
  getCurrent_YMDHMS_Time, //获取当前年月日时分秒
} from "@/utils/common.js";
import {
  clearObj, //清空表单的值的方法
} from "@/utils/index.js";
export default {
  data() {
    return {
      // 数据条数
      total: 0,
      //分页数据
      query: {
        pageNum: 1, //页码
        pageSize: 10, //页数
      },
      multipleSelection: [], //多选
      addFormVisible: false, //添加弹框显示隐藏
      dialogVisible: false, //编辑弹框显示隐藏
      //弹窗内容
      form: {
        colonyTemplateId: "", //模版id
        colonyTemplateName: "", //模版名称
      },
      //表单验证规则
      rules: {
        colonyTemplateName: [
          { required: true, message: "请输入模版名称", trigger: "blur" },
        ],
      },
      //搜索框内容
      keyword: "",
      //表格数据
      tableData: [],
    };
  },
  methods: {
    //获取列表数据
    getListData(searchVal) {
      let query = { ...this.query };
      if (searchVal) query.colonyName = searchVal;
      getClusterList_Api(query).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    //删除集群模版数据
    deleteData(id) {
      this.$confirm("是否确认删除该集群模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          delCluster_Api(id)
            .then((res) => {
              this.getListData();
              this.$message.success("删除成功");
            })
            .catch((error) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //集群模版添加
    addClusterTemplate(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          this.form.addTime = getCurrent_YMDHMS_Time(); //当前新增时间
          addCluster_Api(this.form)
            .then((res) => {
              this.getListData(); //重新获取数据
              this.addFormVisible = false; //隐藏添加模版弹框
              this.$message.success("添加成功");
            })
            .catch((error) => {
              this.$message.error("添加失败");
            });
        } else {
          return false;
        }
      });
    },
    // 显示新增弹窗
    showAddForm() {
      this.addFormVisible = true;
      this.form = clearObj(this.form); //清空表单
    },
    //集群模版编辑
    editClusterTemplate(formName) {
      //验证表单是否输入正确
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //正确
          this.form.updateTime = getCurrent_YMDHMS_Time(); //当前编辑时间
          editCluster_Api(this.form)
            .then((res) => {
              this.getListData(); //重新获取数据
              this.dialogVisible = false; //隐藏添加模版弹框
              this.$message.success("修改成功");
            })
            .catch((error) => {
              this.$message.error("修改失败");
            });
        } else {
          return false;
        }
      });
    },
    //显示编辑弹框
    ShowEditForm(index, row) {
      this.dialogVisible = true;
      this.form = { ...row };
    },
    //搜索
    handleQuery() {
      if (this.keyword) {
        this.getListData(this.keyword);
      } else {
        this.getListData();
      }
    },

    //表格id样式
    cellStyle({ column, columnIndex }) {
      // 状态列字体颜色
      if (column.ID !== "" && columnIndex === 1) {
        return "color: #46a6ff;cursor:pointer;";
      }
    },

    //跳转相应页面
    goInfo(row) {
      this.$router.push({
        path: "Cluster_Info?colonyTemplateId=" + row.colonyTemplateId,
      });
    },
    // 排序
    formatter(row, column) {
      return row.address;
    },
  },
  created() {
    //获取表格数据
    this.getListData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  padding-bottom: 10px;
}
</style>
